<template>
  <div class="header-list">
    <div class="content">
      <div class="list-box">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <img :src="item.icon" alt="" />
          <div>
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="list-box">
        <div class="list-item" v-for="(item, index) in list2" :key="index">
          <img :src="item.icon" alt="" />
          <div>
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="list-box">
        <div class="list-item" v-for="(item, index) in list3" :key="index">
          <img :src="item.icon" alt="" />
          <div>
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
import img1 from "@/assets/evstore/icon_evluping@2x.png";
import img3 from "@/assets/evstore/icon_evshipingzhuanhuan@2x.png";
import img5 from "@/assets/evstore/icon_evtouping@2x.png";
import img6 from "@/assets/evstore/icon_evcam@2x.png";
import img7 from "@/assets/evstore/store_icon_kuozhanp@2x.png";
import img8 from "@/assets/evstore/icon_evpingmugongxiang@2x.png";
import img9 from "@/assets/evstore/icon_evjiami@2x.png";
import img10 from "@/assets/evstore/icon_evjiami2@2x.png";
import img11 from "@/assets/evstore/icon_evduoliao@2x.png";
import img12 from "@/assets/evstore/icon_evhudong@2x.png";
import img13 from "@/assets/evstore/icon_evcloudenc@2x.png";
import img14 from "@/assets/evstore/icon_evyuanchengxiezhu@2x.png";
import img15 from "@/assets/evstore/logo40.png";
import img19 from "@/assets/evstore/index_pro_logo5.png";
import img36 from "@/assets/evstore/36.png";
let state = reactive({
  list: [
    {
      title: "EV录屏",
      icon: img1,
    },
    {
      title: "EV投屏",
      icon: img5,
    },
    {
      title: "EV多聊",
      icon: img11,
    },
    {
      title: "EV加密2",
      icon: img10,
    },
    {
      title: "云课堂软件",
      icon: img15,
    },
    {
      title: "EV远程协助",
      icon: img14,
    },
  ],
  list2: [
    {
      title: "EV剪辑",
      icon: img14,
    },
    {
      title: "EV虚拟摄像头",
      icon: img6,
    },
    {
      title: "EV屏幕共享",
      icon: img8,
    },
    {
      title: "EVplayer2",
      icon: img19,
    },
    {
      title: "EV云加密",
      icon: img13,
    },
    {
      title: "EV互动",
      icon: img12,
    },
  ],
  list3: [
    {
      title: "EV视频转换器",
      icon: img3,
    },
    {
      title: "EV扩展屏",
      icon: img7,
    },
    {
      title: "EV直播助手",
      icon: img5,
    },
    {
      title: "EV加密",
      icon: img9,
    },
    {
      title: "EV全能播放器",
      icon: img36,
    },
  ],
});
let { list, list2, list3 } = toRefs(state);
</script>

<style lang="less">
.header-list {
  width: 220px;
  background: #f9f9f9;
  height: 100%;
  .content {
    .list-box {
      .list-item {
        padding: 6px 16px;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 16px;
        color: #555;
        img {
          width: 38px;
          height: 38px;
          margin-right: 14px;
        }
      }
    }
  }
}
</style>
